<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: snzo.chen
 * @Date: 2023-11-16 15:01:18
 * @LastEditors: snzo.chen
 * @LastEditTime: 2023-12-20 16:37:29
-->
<template>
  <ActionTable :showBack="false" @addRow="showModal('ADD', { state: 0 })">
    <div class="screen-box">
      <a-form ref="screenFormRef" layout="inline" :model="screenData">
        <a-form-item>
          <a-select
            allowClear
            v-model:value="screenData.menuType"
            style="width: 120px"
            placeholder="组别"
          >
            <a-select-option :value="1">用户端</a-select-option>
            <a-select-option :value="2">核销端</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="screenHandleSubmit">搜索</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="resetScreenForm">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
  </ActionTable>
  <a-table
    :columns="columns"
    :row-key="(record) => record.id"
    :data-source="menuOfData"
    :pagination="state.pagination"
    :loading="state.loading"
    @change="handleTableChange"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'menuType'">
        <a-tag>{{ MenuTypeTitle[record.menuType] }}</a-tag>
      </template>
      <template v-if="column.key === 'state'">
        <template v-if="record.menuType === 1">
          <a-switch
            :checked="record.state === 1"
            checked-children="开启"
            un-checked-children="关闭"
            @click="(checked) => showMenu(checked, record)"
          />
        </template>
        <template v-else-if="record.menuType === 2">
          <a-tag :color="MenuStateColor[record.state]">{{
            MenuStateTitle[record.state]
          }}</a-tag>
        </template>
      </template>
      <template v-if="column.key === 'action'">
        <TableRowAction
          :showSelect="record.menuType === 1"
          :selText="'查看二级类别'"
          @subItem="subMenu(record)"
          @updateItem="showModal('UPDATE', record)"
          @deleteItem="delMenu(record.id)"
        />
      </template>
    </template>
  </a-table>
  <contextHolder />
</template>
<script lang="ts" setup>
import {
  deleteTicketMenu,
  insertTicketMenu,
  selectAllMenu,
  selectMenuByExample,
  updateTicketMenu,
} from "@/api/ticket/menu";
import { TableProps, message as $message, Modal } from "ant-design-vue";
import { h, onMounted, reactive, ref } from "vue";
import { router } from "@/router";
import { MenuStateColor, MenuStateTitle, MenuTypeTitle } from "./menuStateEnum";
import MenuForm from "./menu-form.vue";
import { modalTitleEnum } from "@/enums/modalEnum";
import { paginationToQuery } from "@/utils/common";
const [modal, contextHolder] = Modal.useModal();
const childRef = ref();
const screenFormRef = ref();
const screenData = reactive<API.TicketMenu>({
  menuType: null, // 0 全部 1 用户端 2 核销端
});
const columns = [
  {
    dataIndex: "id",
    title: "类别ID",
    key: "id",
    align: "center",
  },
  {
    dataIndex: "menuName",
    title: "类别名称",
    key: "menuName",
    align: "center",
  },
  {
    dataIndex: "menuType",
    title: "组别",
    key: "menuType",
    align: "center",
  },
  {
    dataIndex: "state",
    title: "状态",
    key: "state",
    align: "center",
  },
  {
    title: "操作",
    key: "action",
    align: "center",
  },
];
const menuOfData = ref<API.TicketMenu[]>([]);
const state = reactive({
  loading: true,
  pagination: {
    pageSize: 10,
    current: 1,
    total: 0,
    showTotal: (total) => `总${total}条`,
  },
});

/**
 * 获取数据
 */
const loadData = async () => {
  const { seachList, seachTotal } = await selectAllMenu(
    paginationToQuery(state.pagination)
  );
  menuOfData.value = seachList;
  state.pagination.total = seachTotal;
  state.loading = false;
};

/**
 * 筛选
 */
const screenHandleSubmit = async () => {
  state.loading = true;
  state.pagination.current = 1;
  const { seachList, seachTotal } = await selectMenuByExample(
    screenData,
    paginationToQuery(state.pagination)
  );
  menuOfData.value = seachList;
  state.pagination.total = seachTotal;
  state.loading = false;
};

/**
 * 重置筛选表单
 */
const resetScreenForm = () => {
  screenData.menuType = null;
};

const handleTableChange: TableProps["onChange"] = (pagination) => {
  state.pagination.current = pagination.current!;
  loadData();
};

/**
 * 查看二级类别
 */
const subMenu = (menu) => {
  router.push({ name: "ticket-menu-item", params: { menuId: menu.id } });
};

/**
 * 状态切换
 * @param checked
 * @param menu
 */
const showMenu = async (checked, menu) => {
  const { msg } = await updateTicketMenu({ id: menu.id, state: checked ? 1 : 0 });
  msg === "success" ? (menu.state = checked ? 1 : 0) : $message.error(msg);
};

/**
 * 删除类别
 * @param id
 */
const delMenu = async (id) => {
  const { msg } = await deleteTicketMenu({ id });
  msg === "success" ? $message.success("删除成功") : $message.error(msg);
  loadData();
};

/**
 * 创建弹窗
 * @param type
 * @param data
 */
const showModal = (type: string, data?: any) => {
  const menuForm = () => h(MenuForm, { ref: childRef, formData: data });
  modal.confirm({
    title: modalTitleEnum[type] + "类别",
    icon: null,
    content: menuForm,
    okText: "提交",
    cancelText: "取消",
    onOk() {
      const { id, menuName, state, menuType } = childRef.value.formState;
      if (type === "ADD") {
        insertTicketMenu({ menuName, state, menuType }).then((result) => {
          if (result.msg === "success") {
            return loadData();
          }
        });
      } else if (type === "UPDATE") {
        updateTicketMenu({ id, menuName, state, menuType }).then((result) => {
          if (result.msg === "success") {
            return loadData();
          }
        });
      }
    },
    onCancel() {
      Modal.destroyAll();
    },
  });
};

onMounted(() => {
  loadData();
});
</script>
<style lang="less" scoped></style>
./menuStateEnum
